import echarts from "echarts";
require('echarts/theme/macarons') // echarts theme

export default {
  methods: {
    _initLineChart(xData, yData, elementId = 'lineChart', getTooltipStr) {
      let myChart = echarts.init(document.getElementById(elementId), 'macarons');
      let legendData = yData.map(item => {
        return {name: item.name, icon: 'rect'};
      });
      var option = {
        // title: {
        //   text: 'category Line'
        // },
        legend: {
          itemWidth: 14,
          data: legendData.every(item => {return item.name != undefined}) ? legendData : []
        },
        tooltip: getTooltipStr ? {
          trigger: 'axis',
          position: function (point, params, dom, rect, size) {
            // 固定在顶部
            return [point[0], '10%'];
          },
          confine: true,
          enterable: true,
          extraCssText: 'max-height:60%;overflow: auto;',
          formatter: getTooltipStr
        } : {
          trigger: 'axis'
        },
        grid: { //调整图表上下左右位置
          top:'10%',
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            interval:0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate:xData.length > 15 ? 38 : 0 // 调整数值改变倾斜的幅度（范围-90到90）
          }
        },
        yAxis: {
          type: 'value'
        },
        series: yData
      };
      myChart.setOption(option, true);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    _initStackedAreaChart (xData, yData, elementId = 'stackedAreaChart') {
      let myChart = echarts.init(document.getElementById(elementId), 'macarons');
      let legendData = yData.map(item => {
        return {name: item.name, icon: 'rect'};
      });
      var option = {
        // title: {
        //   text: 'Stacked Area Chart'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          itemWidth: 14,
          data: legendData.every(item => {return item.name != undefined}) ? legendData : []
        },
        grid: { //调整图表上下左右位置
          top:'10%',
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: yData
      };
      myChart.setOption(option, true);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    _initPieChart(data, title, elementId = 'pieChart') {
      let myChart = echarts.init(document.getElementById(elementId), 'macarons');
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: 10
        },
        series: [
          {
            name: title,
            type: 'pie',
            radius: '50%',
            label : {
              normal : {
                formatter: '{b}:{c}: ({d}%)',
                textStyle : {
                  fontWeight : 'normal',
                  fontSize : 15
                }
              }
            },
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option, true);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    _initBarChart(xData, yData, elementId = 'barChart') {
      let myChart = echarts.init(document.getElementById(elementId), 'macarons');
      let totalNum = yData.reduce(function (total, currentValue, currentIndex, arr){
        return total + currentValue;
      }, 0);
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (elementId == 'riskCityRate') {
              return `城市:${params.name}<br/>风控用户:${params.value}<br/>占比:${(params.value / totalNum * 100).toFixed(2)}%`;
            } else if (elementId == 'riskAppRate') {
              return `App:${params.name}<br/>风控用户:${params.value}<br/>占比:${(params.value / totalNum * 100).toFixed(2)}%`;
            } else {
              return `${params.name}:${params.value}\n(${(params.value / totalNum * 100).toFixed(2)}%)`;
            }
          }
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            interval:0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate:xData.length > 10 ? 38 : 0 // 调整数值改变倾斜的幅度（范围-90到90）
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: yData,
          type: 'bar',
          label: {
            show: true,
            position: 'inside',
            formatter: '{c}'
          }
        }]
      };
      myChart.setOption(option, true);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
}